<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            /* width: 400px;
            height: 100px; */
            margin: 200px auto;
            /* border: 1px solid red; */
            /* line-height: 100px; */
            font-size: 30px;
            text-align: center;
            color: rgb(255, 137, 137);
        }
        .box{
            position: relative;
        }
        .box span{
            /* 让文字飘起来,才能显示文字的旋转 */
            position: absolute;
        }
        .box span:nth-child(1){
            left: 50px;
            animation: rotateText1 .3s ease infinite;
        }
        .box span:nth-child(2){
            left: 200px;
            animation: rotateText2 0.5s ease infinite;
        }
        @keyframes rotateText1{
            0%{
                transform: rotate(-8deg);
            }
            25%{
                transform: rotate(0deg);
            }

            50%{
                transform: rotate(8deg);
            }

            75%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(-2deg);
            }

        }
        @keyframes rotateText2{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <span>我们一起</span>
        <span>向未来</span>
    </div>
</body>

</html>